<template>
    <div class="observer-lbrary-pages">
        <div style="display: flex;margin-left: 10px;align-items: flex-start;">
            <a-form layout="inline">
                <a-form-item label="日期" style="display: flex;margin-top: 10px;">
                    <a-range-picker v-model:value="rangePickerArr" @change="rangePickerChange" />
                </a-form-item>
            </a-form>
            <compSearchCriteria
            :formItem.sync="formItem" 
            @searchHandleChange="searchHandleChange" 
            v-model="dataTableConfig.requestParams"
            ref="refSearchCriteria"
            />
        </div>
        
        
        
         <div class="btn-box" style="margin: 20px 0;">
            <div></div>
            <a-form layout="inline" style="display: flex;justify-content: flex-end;">
                <a-form-item>
                    <a-button class="blue-btn" type="primary" @click="queryResultsClick">查询成绩</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button class="blue-btn" type="primary" @click="leadingOutClick">导出</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button class="red-btn" type="primary" @click="batchDeletion" >批量删除</a-button>
                </a-form-item>
            </a-form>
         </div>
         
        <div>
            <compTable
             :key="compSelectorkey" 
             :config='dataTableConfig' 
             :columns="columns" 
             :requestParamObj="requestParams" 
             @selectedRowKeys="selectedRowKeys"
             @sorterChange="sorterChange"
             >
                <!-- <template v-slot:url="scope">
                    <span>{{ scope }}</span>
                </template> -->
                <template v-slot:operation="{record}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form">
                        <a-form-item >
                            <a-button class="blue-btn" type="primary" @click="reviseClick(record)">详情</a-button>
                        </a-form-item>
                        <a-form-item >
                            <a-button class="red-btn" type="primary" @click="deleteClick(record)" >删除</a-button>
                        </a-form-item>
                    </a-form>
                </template>
            </compTable>
        </div>
        <answerDetailed ref="refDetailed" :addEditParameter="addEditParameter"/>
        <QRQueryResults ref="refQRQueryResults"/>
        <!-- </a-modal> -->
        
    </div>
</template>
<script>
import compSearchCriteria from '@/components/compSearchCriteria/compSearchCriteria'
import compTable from '@/components/compTable/compTable'
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import assessCheckApi from './service/api.js'
import { deleteArrServe,  leadingOutExccel, } from './service/index'
import answerDetailed from './answerDetailed.vue'
import moment from 'moment'
import QRQueryResults from './QRQueryResults.vue'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// import { CodeSandboxCircleFill } from '@yuncheng/ych-components'
  export default {
    components:{
        compSearchCriteria,
        compTable,
        answerDetailed,
        QRQueryResults
    },
    
    data(){
        return{
            addEditParameter:{},
            addEditVisible:false,
            selectedRowKeysArr:[],//选中表格数据
            compSelectorkey:'',
            requestParams:{},
            formItem:[
                {
                    label: '考生姓名',
                    model: 'fksxm',
                    placeholder: '请输入考生姓名',
                },{
                    label: '试卷名称',
                    model: 'fsjmc',
                    placeholder: '请输入试卷名称',
                },{
                    label: '试卷类型',
                    model: 'fsjlx',
                    placeholder: '请输入试卷类型',
                },{
                    label: '是否提交试卷',
                    model: 'flag',
                    type:typeSelect,
                    options:[{
                        label:'是',
                        value:'是'
                    },{
                        label:'否',
                        value:'否'
                    }]
                }],
            columns: [
            {
                    title: '考生姓名', //列头显示文字
                    dataIndex: 'fksxm',
                    key: 'fksxm',
                },{
                    title: '工作单位', //列头显示文字
                    dataIndex: 'fgzdw',
                    key: 'fgzdw',
                },{
                    title: '联系电话',
                    dataIndex: 'flxdh',
                    key: 'flxdh',
                },{
                    title: '试卷名称',
                    dataIndex: 'fsjmc',
                    key: 'fsjmc',
                },{
                    title: '试卷类型',
                    dataIndex: 'fsjlx',
                    key: 'fsjlx',
                },{
                    title: '得分',
                    dataIndex: 'fdf',
                    key: 'fdf',
                },{
                    title: '提交时间',
                    dataIndex: 'ftjsj',
                    key: 'ftjsj'
                },{
                    title: '操作',
                    dataIndex: 'id',
                    scopedSlots: {customRender: 'operation'}, // 自定插槽格式
                    fixed: 'right',
                    width:160
                }
            ],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowKey: 'id',
                rowName: 'fgcyxm',
                rowSelection: {
                    // selectedRowKeys: null,
                    // type: EselectionType.checkbox
                },
                fywflcode:'001002',
            },
            leadingOutLoading:false,
            DownloadTemplateLoading:false,
            rangePickerArr:[],
            startTime:'',
            endTime:'',
        }
    },
    
    methods:{
        queryResultsClick(){//查询成就
            this.$refs.refQRQueryResults.visibleQRQrCode = true
        },
        sorterChange(val,sorter){//获取到排序的数据
            //console.log('获取到排序的数据',val,sorter)
        },
        renovateSearchTabel(){//刷新搜索、表格
            this.compSelectorkey = Date.now()
            this.$refs.refSearchCriteria.resetEvents()
        },
        searchHandleChange(val){//获取搜索数据
            if(val.resetEvents){
                this.compSelectorkey = Date.now()
                this.rangePickerArr = []
                this.startTime = ''
                this.endTime = ''
            }
            this.dataTableConfig.requestParams={...val}
            this.requestParams = {...this.requestParams,...val,startTime:this.startTime?this.startTime+' 00:00:00':'',endTime:this.endTime?this.endTime+' 00:00:00':''}
        },
        selectedRowKeys(keys){//获取选中表格rowKey
            this.selectedRowKeysArr = keys
        },
        rangePickerChange(e){
            //console.log(e)
            this.startTime = moment(e[0], 'YYYY-MM-DD').format('YYYY-MM-DD')
            this.endTime = moment(e[1], 'YYYY-MM-DD').format('YYYY-MM-DD')
            
        },
        reviseClick(val){//详情
            this.addEditParameter = {}
            this.$refs.refDetailed.visibleDetailedShow = true
            this.$refs.refDetailed.getData(val[0])
            this.addEditParameter = val[0]
        },
        leadingOutClick(){//导出
            var that = this
            this.leadingOutLoading = true
            var fileName = '答卷文件'
            let param = { }
            if(that.selectedRowKeysArr.length){
                param = {
                    ids:that.selectedRowKeysArr.join(','),
                    fywflcode:'001002'
                }
            }else{
                param = {...that.requestParams,fywflcode:'001002'}
            }
            
            leadingOutExccel(param).then((data) => {
                this.leadingOutLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })

        },
        batchDeletion(){//
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    if(that.selectedRowKeysArr.length){
                        let deleteString = that.selectedRowKeysArr.join(',')
                        deleteArrServe({ids:deleteString}).then(res=>{
                            if(res.code == 200){
                                that.$message.success('删除成功')
                            }else{
                                that.$message.warning(res.message)
                            }              
                            that.renovateSearchTabel()
                        })
                    }else{
                        that.$message.warning('请选择删除项')
                    }
                },
                
            });
            
            
        },
        //删除
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteArrServe({ids:val[0].id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }              
                        that.renovateSearchTabel()
                    })
                },
                
            });
            
            
        },
        AddHandleOk(){
            this.renovateSearchTabel()
        }
    },

  }
</script>
<style scoped>
.observer-lbrary-pages{
    background: #fff;
}
.btn-box{
    display: flex;
    justify-content: space-between;
}
.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}

</style>